/*
 * @Author: xianfuyou
 * @Date: 2022-04-04 15:35:07
 * @LastEditors: your name
 * @LastEditTime: 2022-04-07 11:40:08
 * @Description: file content
 */
import React, { useState } from 'react'
import { Table, Row, Col, Modal } from 'antd'
import { FormOutlined, DeleteFilled, CloseCircleFilled } from '@ant-design/icons';
import ButtonWarpCpn from '../../../components/CommBtn/CommBtn'
import AddLinkman from '../../../components/OrderCpn/AddLinkman'
import '../../../components/OrderCpn/css/Model.css'
import './Linkman.css'

const linkmanLists = [
  {
    key: 1,
    id: 1,
    linkmanName: `可乐`,
    sex: `男`,
    job: `拉拉`,
    tel: `13183555555`,
    wechat: '100',
    qq: `200`,
    email: '13135',
    birth: `2022-03-30`,
    remark: `212312312sadasd`,
    enterTime: `2022-03-30`,
  }, {
    key: 2,
    id: 2,
    linkmanName: `可乐`,
    sex: `女`,
    job: `嘿嘿`,
    tel: `123213213`,
    wechat: '100',
    qq: `200`,
    email: '13135',
    birth: `2021-04-30`,
    remark: `212312312sadasd`,
    enterTime: `2022-03-30`,
  }
]
export default function Linkman() {
  // 新增联系人
  const [addLinkman, setAddLinkman] = useState(false)
  const [linkemanInfo, setLinkemanInfo] = useState(null)
  const [delLinkman, setDelLinkman] = useState(false)
  // 当前修改的对象
  const nowObj = (record) => {
    setAddLinkman(true)
    setLinkemanInfo(record)
  }
  const delHandleOk = () => {
    console.log('删除联系人弹窗', linkemanInfo)
    setDelLinkman(false)
  }
  // 删除联系人弹窗
  const delCurrLinkman = (record) => {
    setDelLinkman(true)
    setLinkemanInfo(record)
  }
  // 表单配置
  const checkGoodsTable = [
    {
      title: '联系人',
      dataIndex: 'linkmanName',
      key: 'linkmanName',
      width: 100,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      width: 80,
    },
    {
      title: '职位',
      dataIndex: 'job',
      key: 'job',
      width: 80,
    },
    {
      title: '手机号码',
      dataIndex: 'tel',
      key: 'tel',
      width: 100,
    },
    {
      title: '微信',
      dataIndex: 'wechat',
      key: 'wechat',
      width: 100,
    },
    {
      title: 'QQ',
      dataIndex: 'qq',
      key: 'qq',
      width: 100,
    },
    {
      title: '电子邮箱',
      dataIndex: 'email',
      key: 'email',
      width: 100,
    },
    {
      title: '生日',
      dataIndex: 'birth',
      key: 'birth',
      width: 100,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 150,
    },
    {
      title: '录入时间',
      dataIndex: 'enterTime',
      key: 'enterTime',
      width: 100,
    },
    {
      title: '管理',
      dataIndex: 'manager',
      key: 'manager',
      width: 160,
      render: (manager, record, index) => {
        // console.log(record, index)
        return <>
          {index > 0 ? <div className={'managerBtn'}>
            <ButtonWarpCpn onClick={() => { nowObj(record) }} bgcolor="#3782c3" size="small" icon={<FormOutlined />}>修改</ButtonWarpCpn>
            <ButtonWarpCpn onClick={() => { delCurrLinkman(record) }} bgcolor="#ff0000" size="small" icon={<DeleteFilled />}>删除</ButtonWarpCpn>
          </div> : <div className={'managerBtn'}>
            <ButtonWarpCpn onClick={() => { nowObj(record) }} bgcolor="#3782c3" size="small" icon={<FormOutlined />}>修改</ButtonWarpCpn>
          </div>}
        </>
      }
    }
  ]


  return (
    <div className={'linkman'}>
      <AddLinkman isShow={addLinkman} nowInfo={linkemanInfo} pOk={(res) => { setAddLinkman(res) }} pCancel={(res) => { setAddLinkman(res) }}></AddLinkman>
      {/* 删除弹窗 */}
      <Modal
        className='xfy_dep_add_modal del_modal'
        title="消息"
        okText="确定"
        cancelText="取消"
        visible={delLinkman}
        onOk={delHandleOk}
        onCancel={() => { setDelLinkman(false) }}
        destroyOnClose={true}
        forceRender={true}
        zIndex={2000}
      >
        <Row align='middle' gutter={10}>
          <Col> <CloseCircleFilled style={{ color: '#faa685', fontSize: '36px' }} /></Col>
          <Col> <span>是否确定删除?</span></Col>
        </Row>

      </Modal>
      <Row justify={'center'}>
        <Col span={24}>
          <Table
            pagination={false}
            size="small"
            columns={checkGoodsTable}
            dataSource={linkmanLists}
          // scroll={{x:1800}}
          />
        </Col>
        <Col className={"buttomInfo"}>
          红色:第一联系人(仅允许修改,同步更新基本档案)
        </Col>
      </Row>
    </div>
  )
}
